<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px" v-if="dataInfo">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="编号:">
            <span>{{ dataInfo.userCode }}</span>
          </el-form-item>
          <el-form-item label="服务员类型:">
            <span>{{ dataInfo.waiterType == 1 ? "专属服务员" : "公共服务员" }}</span>
          </el-form-item>
          <el-form-item label="工作类型:">
            <span>{{ dataInfo.jobType == 1 ? "时段产品专员" : "普通" }}</span>
          </el-form-item>
          <el-form-item label="商户">
            <span>{{ dataInfo.businessName }}</span>
          </el-form-item>
          <el-form-item label="部门:" v-if="dataInfo.waiterType == 1">
            <span>{{ departNames }}</span>
          </el-form-item>
          <el-form-item label="账号:">
            <span>{{ dataInfo.userName }}</span>
          </el-form-item>
          <el-form-item label="昵称:">
            <span>{{ dataInfo.nickName }}</span>
          </el-form-item>
          <el-form-item label="姓名:">
            <span>{{ dataInfo.fullName }}</span>
          </el-form-item>
          <el-form-item label="性别:">
            <span>{{ dataInfo.sex === 1 ? "男" : "女" }}</span>
          </el-form-item>
          <el-form-item label="邦定手机号:">
            <span>{{ dataInfo.phone}}</span>
          </el-form-item>
          <el-form-item label="接单方式:">
            <span>{{ dataInfo.autoReceiveFlag!==2?'手动接单':'自动接单' }}</span>
          </el-form-item>
          <el-form-item label="下班方式:">
            <span>{{ dataInfo.workOffWay!==2?'手动下班':'自动下班' }}</span>
          </el-form-item>
          <el-form-item label="排班权限:">
            <span>{{ dataInfo.scheduleAuthority==1?'有':'无' }}</span>
          </el-form-item>
          <el-form-item label="个人信息管理权限:">
            <span>{{ dataInfo.personPower==1?'有':'无' }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>服务范围信息</h2>
        </div>
        <el-row>
          <el-table :data="waiterVillages" border style="width:max-content">
            <el-table-column type="index" label="序号" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="address" label="地区" align="center" width="300px">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.areaName }}{{ scope.row.streetName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="villageName" label="小区" align="center" width="250px">
            </el-table-column>
            <!--<el-table-column prop="linkName" label="联系人" align="center" width="150px">
            </el-table-column>
            <el-table-column prop="linkPhone" label="联系电话" align="center" width="200px">
            </el-table-column>-->
          </el-table>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import WaiterApi from '@/api/business/waiter';
import BusinessApi from "@/api/business/business"
import BusinessDepartApi from "@/api/business/depart"
export default {
  data() {
    return {
      dataInfo: {},
      businessList: [],
      waiterVillages: [],
      departNames:"",
    };
  },
  computed: {},
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      WaiterApi.getWaiterInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        this.waiterVillages = res.data.waiterVillages
        if(this.dataInfo.businessId){
          this.getDepartNames()
        }

      })
    },
    getDepartNames() {
      BusinessDepartApi.listMangerTree({ businessId: this.dataInfo.businessId }).then(res => {
        const departList = res.data
        let departNames = ""
        const { departId, firstDepartId, secondDepartId, thirdDepartId } = this.dataInfo

        if (thirdDepartId) {
          departNames = this.$Utils.filterTreeToArr(departList,{departId:thirdDepartId},"departId")
        }else if(secondDepartId){
          departNames = this.$Utils.filterTreeToArr(departList,{departId:secondDepartId},"departId")
        }else if(firstDepartId){
          departNames = this.$Utils.filterTreeToArr(departList,{departId:firstDepartId},"departId")
        }else if(departId){
          departNames = this.$Utils.filterTreeToArr(departList,{departId:departId},"departId")
        }

        this.departNames = departNames.map(item=>item.departName).join("-")
      })

    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.back()
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
